
<html>
<head>
    <meta charset="UTF-8">
    <title>学生页面</title>
    <style>
        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }
    </style>
</head>
<body>
<!--导入axios文件-->
<script src="js/axios-0.18.0.js"></script>
<!--导入vue.js文件-->
<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <div id="app">
        <el-row>
            <el-button type="primary" plain @click="dialogVisible=true">新增</el-button>
        </el-row>
        <el-dialog
                title="新增学生"
                :visible.sync="dialogVisible"
                width="30%">
            <el-form :model="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="学生姓名" prop="stuName">
                    <el-input v-model="ruleForm.stuName"></el-input>
                </el-form-item>
                <el-form-item label="性别" prop="stuSex">
                    <el-radio v-model="ruleForm.stuSex" label=0>男</el-radio>
                    <el-radio v-model="ruleForm.stuSex" label=1>女</el-radio>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="add()">立即创建</el-button>
                    <el-button @click="dialogVisible=false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-table
                :data="students"
                style="width: 100%"
                :row-class-name="tableRowClassName">
            <el-table-column
                    type="index"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="stuName"
                    label="学生姓名"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="stuSex"
                    label="性别"
                    align="center">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            type="primary"
                            size="medium"
                            @click="handleStudentById(scope.row)">修改</el-button>
                   <el-button
                            size="medium"
                            type="danger"
                            @click="handleRemove(scope.row)">删除</el-button>
                    <el-button
                            size="medium"
                            type="success"
                            @click="handleInfo(scope.row)">选课</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--修改对话框-->
        <el-dialog
                title="修改学生"
                :visible.sync="editDialogVisible"
                width="30%">
            <el-form :model="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="学生姓名" prop="stuName">
                    <el-input v-model="ruleForm.stuName"></el-input>
                </el-form-item>
                <el-form-item label="性别" prop="stuSex">
                    <el-radio v-model="ruleForm.stuSex" :label=0>男</el-radio>
                    <el-radio v-model="ruleForm.stuSex" :label=1>女</el-radio>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleEdit()">修改</el-button>
                    <el-button @click="editDialogVisible=false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <!--修改对话框-->
        <el-dialog
                title="学生选课信息"
                :visible.sync="studentInfoDialogVisible"
                width="30%">
            <el-form :model="studentCourses" label-width="100px" class="demo-ruleForm">
                <el-form-item label="学生姓名" prop="stuName">
                    <el-input v-model="studentCourses.stuName"></el-input>
                </el-form-item>

<!--                <el-form-item v-for="(courseName, score) in studentCourses .map" :key="courseName" :label="学生选课">-->
<!--                    <el-input type="text" : v-model="courseName" />-->
<!--                    <el-input type="text" : v-model="score" />-->
<!--                </el-form-item>-->
                <el-form-item label="课程平均分" prop="avg">
                    <el-input v-model="studentCourses.avg"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="studentInfoDialogVisible=false">确认</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
    <script>
        //新建vue核心对象
        new Vue({
            el:"#app",
            data(){
                return{
                    //学生表格数据
                    students:[],
                    //对话框是否可视
                    dialogVisible: false,
                    //编辑对话框是否可视
                    editDialogVisible: false,
                    //学生选课信息对话框
                    studentInfoDialogVisible: false,
                    //学生选课信息
                    studentCourses:{
                        stuName: '',
                        map: {
                        },
                        avg: 0
                    },
                    //表单数据封装
                    ruleForm: {
                        stuId: '',
                        stuName: '',
                        stuSex: 0
                    },
                }
            },
            methods:{
                selectAll(){
                    const that = this;
                    axios({
                        method:"get",
                        url:"http://localhost:80/student/getAll"
                    }).then(function(resp){
                        that.students= resp.data;
                    })
                },
                tableRowClassName({row, rowIndex}) {
                    if (rowIndex === 1) {
                        return 'warning-row';
                    } else if (rowIndex === 3) {
                        return 'success-row';
                    }
                    return '';
                },
                add(){
                    const that = this;
                    axios({
                        method:"post",
                        url:"http://localhost:80/student/add",
                        data:that.ruleForm
                    }).then(function(resp){
                        if(resp.data==="success"){
                            that.dialogVisible=false;
                            that.selectAll();
                            that.$message({
                                message: '添加成功',
                                type: 'success'
                            });

                        }
                    })
                },
                //删除学生
                handleRemove(row){
                    const that = this;
                   //获取学生的学号
                    const stuId = row.stuId;
                    axios({
                        method:"get",
                        url:"http://localhost:80/student/deleteById?stuId="+stuId
                    }).then(function(resp){
                        if(resp.data==="success"){
                            that.selectAll();
                            that.$message({
                                message: '删除成功',
                                type: 'success'
                            });

                        }
                    })
                },
                //根据学生id查询学生信息
                handleStudentById(row){
                    const that = this;
                    //获取学生的学号
                    const stuId = row.stuId;
                    axios({
                        method:"get",
                        url:"http://localhost:80/student/getById?stuId="+stuId
                    }).then(function(resp){
                        that.ruleForm=resp.data;
                        //将stuSex改为字符串
                       //that.ruleForm.stuSex=String(resp.data.stuId);
                        console.log(that.ruleForm);
                        //弹出编辑对话框
                        that.editDialogVisible=true;
                    })
                },
                handleEdit(){
                    const that = this;
                    console.log("数据更新："+that.ruleForm);
                    axios({
                        method:"post",
                        url:"http://localhost:80/student/update",
                        data:that.ruleForm
                    }).then(function(resp){
                        if(resp.data==="success"){
                            that.editDialogVisible=false;
                            that.selectAll();
                            that.$message({
                                message: '修改成功',
                                type: 'success'
                            });

                        }
                    })
                },
                //根据学生id查询学生的选课信息
                handleInfo(row){
                    const that = this;
                    //获取学生的学号
                    const stuId = row.stuId;
                    axios({
                        method:"get",
                        url:"http://localhost:80/studentcourse/getByStuId?stuId="+stuId
                    }).then(function(resp){
                        if(resp.data==="fail"){
                            that.$message({
                                message: '您还没有选课',
                                type: 'info'
                            });
                        }else{
                            that.studentCourses=resp.data;
                            //弹出编辑对话框
                            that.studentInfoDialogVisible=true;
                        }

                    })
                }
            },
            mounted(){
               this.selectAll();
            }
        });
    </script>
</body>
</html>
